<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
    <Store
      :type="'component'"
      :select-store-list="selectStoreList"
      :multiple="true"
      @select-stores="selectStore"
    />
  </Dialog>
</template>
<script lang="ts" setup>
defineOptions({ name: 'StoreSelectDialog' })

const Store = defineAsyncComponent(() => import('./StoreList.vue'))

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('门店选择') // 弹窗的标题
const selectStoreList = ref() //选择的门店列表
const open = async (storeList?: any[]) => {
  dialogVisible.value = true
  dialogTitle.value = '门店选择'
  resetForm()
  selectStoreList.value = storeList
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 使用选中的门店 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const selectStore = (storeList: any) => {
  selectStoreList.value = storeList.value
  emit('success', selectStoreList.value)
  dialogVisible.value = false
}
/** 重置表单 */
const resetForm = () => {
  selectStoreList.value = []
}
</script>
